<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <div id="oDiv"></div>
    <script>
        // 防抖
        /* oDiv.onmousemove = function (e) {
            let left = e.pageX - this.offsetLeft
            let top = e.pageY - this.offsetTop
            this.innerHTML = `x: ${left}，y: ${top}`
        } */
        /* oDiv.onmousemove = function (...args) {
            console.log(args[0])
            let left = args[0].pageX - this.offsetLeft
            let top = args[0].pageY - this.offsetTop
            this.innerHTML = `x: ${left}，y: ${top}`
        } */
        // 问题：频率太高了
        /* let timer = null;
        oDiv.onmousemove = function (e) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                let left = e.pageX - this.offsetLeft
                let top = e.pageY - this.offsetTop
                this.innerHTML = `x: ${left}，y: ${top}`
            }, 50)
        } */

        // 需求：封装一个函数叫 debounce，实现防抖功能
        /* const debounce = (fn, time) => {
            let timer = null
            return function (e) {
                clearTimeout(timer)
                // this => oDiv
                timer = setTimeout(() => {
                    // 干啥！
                    fn.call(this, e) // 调用的时候传递才是实参，window.fn()
                }, time)
            }
        } */

        /* const debounce = (fn, time) => {
            let timer = null
            return function (...args) {
                clearTimeout(timer)
                // this => oDiv
                timer = setTimeout(() => {
                    // 干啥！
                    fn.apply(this, args) // 调用的时候传递才是实参，window.fn()
                }, time)
            }
        } */

        oDiv.onmousemove = _.debounce(function (e) {
            let left = e.pageX - this.offsetLeft
            let top = e.pageY - this.offsetTop
            this.innerHTML = `x: ${left}，y: ${top}`
        }, 50);
    </script>
</body>

</html>